"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const global_1 = require("../../../config/global");
function registerDialogueNode(lf) {
    lf.register('dialogueNode', ({ RectNode, RectNodeModel, h }) => {
        class Node extends RectNode {
            getInputElement() {
                const { model } = this.props;
                const { x, y } = model;
                let nodeData = model.getData();
                const properties = model.getProperties();
                let content = '';
                if (properties) {
                    content = properties.content;
                }
                // 创建一个文本输入框
                return h("g", {}, [
                    h("foreignObject", {
                        height: 95,
                        width: 220,
                        y: y,
                        x: x - 110,
                    }, [
                        h("textarea", {
                            type: "text",
                            maxlength: "300",
                            value: content,
                            onInput: (event) => {
                                let newContent = event.target.value;
                                properties.content = newContent;
                                model.setProperties(properties);
                            },
                            style: {
                                width: "100%",
                                height: "100%",
                                padding: 5,
                                top: 0,
                                border: "none",
                                outline: "none",
                                background: "transparent",
                                fontSize: "12px",
                                color: "#000000"
                            }
                        })
                    ])
                ]);
            }
            getTitleElement() {
                const { model } = this.props;
                const { x, y } = model;
                const style = model.getNodeStyle();
                const properties = model.getProperties();
                let title = '';
                if (properties) {
                    title = properties.graphRes_title;
                }
                // 创建一个文本输入框
                return h("g", {}, [
                    h('text', {
                        fill: '#000000',
                        fontSize: 16,
                        x: x - 60,
                        y: y - 94,
                        width: 50,
                        height: 25
                    }, 'CC_DialogueNode')
                ]);
            }
            ;
            getLabelShape() {
                const { model } = this.props;
                const { x, y } = model;
                const nodeData = model.getData();
                let rolePic = '';
                if (nodeData.properties) {
                    rolePic = nodeData.properties.rolePic;
                }
                if (!rolePic) {
                    return h("g", {}, [
                        h('text', {
                            fill: '#000000',
                            fontSize: 12,
                            x: x - 10,
                            y: y - 35,
                            width: 50,
                            height: 25
                        }, '(选择一个角色对象)')
                    ]);
                }
                ;
            }
            getLocIconShape() {
                const { model } = this.props;
                const { x, y } = model;
                const { stroke } = model.getNodeStyle();
                const nodeData = model.getData();
                let loc_picUrl = '';
                if (nodeData.properties) {
                    loc_picUrl = nodeData.properties.locationPic;
                }
                if (loc_picUrl) {
                    return h("g", {}, [
                        h('image', {
                            x: x - 100,
                            y: y - 65,
                            width: 50,
                            height: 50,
                            href: loc_picUrl, // 使用图片地址
                        })
                    ]);
                }
                else {
                    return h("g", {}, [
                        h('svg', {
                            x: x - 100,
                            y: y - 70,
                            width: 50,
                            height: 50,
                            viewBox: '0 0 1126 1024',
                        }, h('path', {
                            fill: stroke,
                            // d: 'M792.576 379.392a25.6 25.6 0 0 0 25.2928 25.8048h283.2384A25.6 25.6 0 0 0 1126.4 379.392a25.6 25.6 0 0 0-25.2928-25.8048h-283.2384a25.6 25.6 0 0 0-25.344 25.8048z m303.9232 80.7424H761.856c-16.5376 0-29.9008 11.6224-29.9008 25.7536 0 14.1824 13.312 25.7536 29.9008 25.7536h334.6432c16.4864 0 29.9008-11.5712 29.9008-25.7536 0-14.1312-13.4144-25.7536-29.9008-25.7536z m4.608 106.496h-283.2384a25.6 25.6 0 0 0-25.344 25.7536 25.6 25.6 0 0 0 25.344 25.7536h283.2384A25.6 25.6 0 0 0 1126.4 592.384a25.6 25.6 0 0 0-25.2928-25.8048zM543.0272 1024H341.6576C150.8352 1024 0 1024 0 923.648v-20.1216c0-188.16 153.2928-341.1968 341.7088-341.1968h201.2672c188.416 0 341.76 153.0368 341.76 341.1968v20.0704C884.6848 1024 726.3232 1024 542.976 1024z m-203.1616-405.1456c-158.464 0-287.4368 128.4096-287.4368 286.208v20.48c0 40.9088 166.0928 40.9088 287.4368 40.9088h204.9536c100.4544 0 287.4368 0 287.4368-40.96v-20.3776c0-157.8496-128.9728-286.208-287.4368-286.208H339.8656z m92.416-76.7488a271.4112 271.4112 0 0 1-271.2064-271.0528A271.36 271.36 0 0 1 432.2816 0a271.36 271.36 0 0 1 271.2064 271.0528 271.4624 271.4624 0 0 1-271.2064 271.0528z m-215.3472-271.872c0 118.1696 96.6144 214.3232 215.3472 214.3232 118.784 0 215.3984-96.1536 215.3984-214.3232 0-118.2208-96.6144-214.3232-215.3984-214.3232S216.9344 152.0128 216.9344 270.2336z'
                            d: 'M503.23456 885.82144l-14.04928-14.15168C478.02368 860.38528 215.49056 593.92 215.49056 434.7904c0-163.55328 129.29024-296.61184 288.21504-296.61184 158.90432 0 288.21504 132.28032 288.256 294.87104 0.04096 159.0272-271.4624 436.51072-274.20672 439.07072l-14.52032 13.70112z m0.49152-706.6624c-136.33536 0-247.25504 114.688-247.25504 255.65184 0 122.79808 192.7168 335.21664 247.48032 393.09312C563.2 765.62432 751.06304 549.4784 751.02208 433.07008c-0.04096-140.00128-110.98112-253.91104-247.296-253.91104z m1.88416 360.83712c-68.9152 0-125.00992-57.79456-125.00992-128.83968s56.07424-128.8192 125.00992-128.8192c68.89472 0 124.96896 57.79456 124.96896 128.8192s-56.05376 128.83968-124.96896 128.83968z m0-216.6784c-46.34624 0-84.04992 39.40352-84.04992 87.8592s37.70368 87.8592 84.04992 87.8592c46.32576 0 84.00896-39.40352 84.00896-87.8592s-37.6832-87.8592-84.00896-87.8592z'
                        }))
                    ]);
                }
            }
            getRoleIconShape() {
                const { model } = this.props;
                const { x, y } = model;
                const { stroke } = model.getNodeStyle();
                const nodeData = model.getData();
                let role_Pic = '';
                let role_boxPos = false;
                if (nodeData.properties) {
                    role_Pic = nodeData.properties.rolePic;
                    role_boxPos = nodeData.properties.rolePos;
                }
                if (role_Pic) {
                    if (role_boxPos) {
                        return h("g", {}, [
                            h('image', {
                                height: 50,
                                width: 55,
                                y: y - 65,
                                x: x + 48,
                                href: role_Pic,
                                onClick: (event) => {
                                    const boxPos = true;
                                    model.graphModel.eventCenter.emit("openRole", {
                                        nodeData,
                                        boxPos
                                    });
                                }
                            })
                        ]);
                    }
                    else {
                        return h("g", {}, [
                            h('image', {
                                height: 50,
                                width: 55,
                                y: y - 65,
                                x: x - 25,
                                href: role_Pic,
                                onClick: (event) => {
                                    const boxPos = false;
                                    model.graphModel.eventCenter.emit("openRole", {
                                        nodeData,
                                        boxPos
                                    });
                                },
                            })
                        ]);
                    }
                }
            }
            getShape() {
                const { model } = this.props;
                const { width, height, x, y, } = model;
                const style = model.getNodeStyle();
                const nodeData = model.getData();
                const tooltip = document.createElement("div");
                tooltip.style.position = "absolute";
                tooltip.style.backgroundColor = "white";
                tooltip.style.color = "black";
                tooltip.style.padding = "5px";
                tooltip.style.border = "1px solid #ccc";
                tooltip.style.borderRadius = "4px";
                tooltip.style.display = "none"; // 初始时隐藏提示
                tooltip.isAdded = false; // 添加自定义属性 isAdded，初始值为 false
                // 添加提示元素到页面，如果还没有添加
                if (!tooltip.isAdded) {
                    document.body.appendChild(tooltip);
                    tooltip.isAdded = true;
                }
                return h("g", {}, [
                    h("rect", Object.assign(Object.assign({}, style), { id: "svg_1", height: 200, width: 262, x: x - 262 / 2, y: y - 85, fill: "#fdfd19" })),
                    h("rect", Object.assign(Object.assign({}, style), { id: "svg_8", height: 30, width: 262, x: x - 262 / 2, y: y - 115 })),
                    h("rect", Object.assign(Object.assign({}, style), { id: "location", type: "location", height: 60, width: 65, y: y - 70, x: x - 110, onClick: (event) => {
                            model.graphModel.eventCenter.emit("openLoc", nodeData);
                        } })),
                    h("rect", Object.assign(Object.assign({}, style), { id: "role", type: "role", height: 60, width: 146, y: y - 70, x: x - 35 })),
                    h("rect", Object.assign(Object.assign({}, style), { id: "svg_5", height: 95, width: 220, y: y, x: x - 110 })),
                    h("rect", Object.assign(Object.assign({}, style), { id: "svg_6", height: 50, width: 55, y: y - 65, x: x - 25, "stroke-dasharray": "5,5", onClick: (event) => {
                            const boxPos = false;
                            console.log('role点击false', event);
                            model.graphModel.eventCenter.emit("openRole", {
                                nodeData,
                                boxPos
                            });
                        } })),
                    h("rect", Object.assign(Object.assign({}, style), { id: "svg_7", height: 50, width: 55, y: y - 65, x: x + 48, "stroke-dasharray": "5,5", onClick: (event) => {
                            const boxPos = true;
                            console.log('role点击true', event);
                            model.graphModel.eventCenter.emit("openRole", {
                                nodeData,
                                boxPos
                            });
                        } })),
                    this.getLabelShape(),
                    this.getLocIconShape(),
                    this.getRoleIconShape(),
                    this.getInputElement(),
                    this.getTitleElement()
                ]);
            }
        }
        class Model extends RectNodeModel {
            constructor(data, graphModel) {
                data.text = {
                    value: (data.text && data.text.value) || '未命名节点-对话',
                    x: data.x,
                    y: data.y + 130
                };
                super(data, graphModel);
                this.radius = 20;
            }
            initNodeData(data) {
                if (!data.virtual) {
                    const dialogue = new global_1.DialogueNode(false, '', '', '', '', '', '', '', '');
                    data.properties = Object.assign({}, dialogue);
                    console.log("dialogue", data.properties);
                }
                super.initNodeData(data);
                this.width = 262;
                this.height = 230;
                const onlyOneAsConnect = {
                    message: "只能连接一个节点",
                    validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
                        return sourceNode.outgoing.nodes.length <= 0;
                    },
                };
                this.sourceRules.push(onlyOneAsConnect);
                const onlyPosAsConnect = {
                    message: "连接对应的锚点",
                    validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
                        return sourceAnchor.type === 'right' && targetAnchor.type === 'left';
                    },
                };
                this.sourceRules.push(onlyPosAsConnect);
            }
            addField() {
                // 更新节点连接边的path
                this.incoming.edges.forEach((egde) => {
                    // 调用自定义的更新方案
                    egde.updatePathByAnchor();
                });
                this.outgoing.edges.forEach((edge) => {
                    // 调用自定义的更新方案
                    edge.updatePathByAnchor();
                });
            }
            getAnchorStyle(anchorInfo) {
                const style = super.getAnchorStyle(anchorInfo);
                if (anchorInfo.type === "left") {
                    style.fill = "red";
                    style.hover.fill = "transparent";
                    style.hover.stroke = "transpanrent";
                    style.className = "lf-hide-default";
                }
                else {
                    style.fill = "green";
                }
                return style;
            }
            setIsShowAnchor() {
                this.isShowAnchor = true;
            }
            getDefaultAnchor() {
                const { width, height, x, y, id } = this;
                return [{
                        x: x + 20 - width / 2,
                        y: y + 15 - height / 2,
                        type: "left",
                        edgeAddable: false,
                        id: `${id}_0`,
                    },
                    {
                        x: x - 18 + width / 2,
                        y: y + 15 - height / 2,
                        type: "right",
                        id: `${id}_1`,
                    },
                ];
            }
        }
        return {
            view: Node,
            model: Model
        };
    });
}
exports.default = registerDialogueNode;
